<template>
	<view class="guidance">
		<view class="guidance-title flexR">
			<view class="guidance-title-content flexR">
				<view class="flexC" :class="sexActive==='男'?'active':''" @click="onClickTab('sexActive','男')">
					<text class="iconfont icon-nan"></text>
					<view class="guidance-title-content-text">男</view>
				</view>
				<view class="flexC" :class="sexActive==='女'?'active':''"  @click="onClickTab('sexActive','女')">
					<text class="iconfont icon-nv"></text>
					<view class="guidance-title-content-text">女</view>
				</view>
			</view>
			<view class="guidance-title-content flexR">
				<view class="flexC" :class="ageActive==='成人'?'active':''" @click="onClickTab('ageActive','成人')">
					<text class="iconfont icon-ren111"></text>
					<view class="guidance-title-content-text">成人</view>
				</view>
				<view class="flexC" :class="ageActive==='儿童'?'active':''" @click="onClickTab('ageActive','儿童')">
					<text class="iconfont icon-xiaoliansmiley40"></text>
					<view class="guidance-title-content-text">儿童</view>
				</view>
			</view>
		</view>
		<view class="div-cut"></view>
		<u-cell-group>
			<u-cell-item :title="item.positionName||''" v-for="item in dataList" @click='clickPosition(item)' :key='item.positionId'></u-cell-item>
		</u-cell-group>
		<!-- 症状 -->
		<u-popup v-model="showSymptom" mode="right" width="450">
			<u-cell-group>
				<u-cell-item :title="item.symptomName||''" v-for="(item,i) in symptomList" @click='toPage(item)' :key='item.symptomId'></u-cell-item>
			</u-cell-group>
		</u-popup>
		<Load :load="load"></Load>
	</view>
</template>

<script>
	import Load from '@/components/Load/index.vue'
	import { getGuidance } from '@/api/otherService.js'
	export default {
		components:{ Load } ,
		data() {
			return {
				load:false,
				sexActive:'男',
				ageActive:'成人',
				dataList:[],
				symptomList:[],
				showSymptom:false
			}
		},
		onLoad() {
			this.initData()
		},
		methods: {
			initData(){
				this.load = true
				let params = {
					guidanceType: this.ageActive + this.sexActive
				}
				getGuidance(params).then(data => {
					this.load = false
					this.dataList = data||[]
				}).catch(e => {
					this.load = false
					this.dataList = []
				})
			},
			clickPosition(item){
				this.symptomList = item.symptomList
				if(item.symptomList.length){
					this.showSymptom = true
				}else{
					this.$u.toast('暂未维护该部位下症状列表')
				}
			},
			onClickTab(key, val){
				this[key] = val
				this.initData()
			},
			toPage(item){
				uni.navigateTo({
					url:'/pages/Home/Guidance/detail?data=' + JSON.stringify(item)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.guidance{
		height: calc(100vh);
		overflow: scroll;
		background-color: #FFF;
		&-title{
			margin: 30rpx;
			justify-content: space-around;
			&-content{
				flex: 1;
				margin: 0 10rpx;
				padding: 26rpx 30rpx;
				border: 2px dashed $theme-color-light;
				border-radius: 10rpx;
				justify-content: space-around;
				>view{
					align-items: center;
				}
				.iconfont{
					font-size: 50rpx;
					color: $text-color-card-title;
				}
				&-text{
					font-size: 24rpx;
					color: $text-color-grey;
					margin-top: 10rpx;
				}
				>view.active{
					>.guidance-title-content-text{
						font-weight: bold;
						color: $text-color;
					}
					>.iconfont{
						color: $theme-color-light;
						font-weight:normal;
					}
				}
			}
		}
	}
</style>

